<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="tbodyId">
    <form>
        <input type="hidden" v-model="id"><br>
        name:<input type="text" v-model="name"><br>
        remark:<textarea v-model="remark"></textarea><br>
        <input type="button" @click="doInsertGoods()" value="提交">
        <input type="button" @click="doUpdateGoods()" value="修改">
    </form>

    <table>
        <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>remark</th>
            <th>createdTime</th>
            <th colspan="2">option</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="l in list">
            <td>{{l.id}}</td>
            <td>{{l.name}}</td>
            <td>{{l.remark}}</td>
            <td>{{l.createdTime}}</td>
            <td><a @click="doDeleteClick(l.id)">删除</a></td>
            <td><a @click="doUpdateClick(l.id)">修改</a></td>
        </tr>
        </tbody>
    </table>
</div>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
    var vue = new Vue({
        //vue要监控的区域
        el:"#tbodyId",
        //存储服务器传来的数据
        data:{
            list:{},
            id:"",
            name:"",
            remark:"",
            createdTime:"",
            goods:{}
        },
        //放置多个方法
        methods:{
            findAll:function () {
                axios.get("http://localhost:8081/goods/findGoods").then(function (resp) {
                    // document.write(result.data);
                    this.vue.list = resp.data;
                })
            },
            doDeleteClick:function(id){
                axios.get("http://localhost:8081/goods/deleteById/" + id).then(function(resp){
                    alert(resp.data);
                    this.vue.findAll();
                });
            },
            doInsertGoods:function(){
                axios.post("http://localhost:8081/goods/saveGoods",{"name":this.name,"remark":this.remark}).then(function(resp){
                    alert(resp.data);
                    this.vue.findAll();
                })
            },
            doUpdateClick:function(id){
                axios.get("http://localhost:8081/goods/findById/" + id).then(function(resp){
                    this.vue.name=resp.data.name;
                    this.vue.id = resp.data.id;
                    this.vue.remark = resp.data.remark;
                    this.vue.createdTime = resp.data.createdTime;
                    this.vue.goods = resp.data;
                })
            },
            doUpdateGoods:function(){
                axios.post("http://localhost:8081/goods/updateGoods",{"id":this.id,"name":this.name,"remark":this.remark}).then(function(resp){
                    alert(resp.data);
                    this.vue.findAll();
                })
            }
        },

        //要执行的方法名称
        mounted:function () {
            this.findAll();
        }
    })


</script>
</body>
</html>